<template>
  <div class="container">
    <PcHeader></PcHeader>
    <img
      v-if="bannerImgList&&bannerImgList.length>0"
      class="banner-bg"
      :src="returnImg(bannerImgList[0].indexImg)"
      :alt="bannerImgList[0].indexName"
    >
    <div class="banner-title" v-if="bannerImgList&&bannerImgList.length>0">
      <h3>{{bannerImgList[0].indexName}}</h3>
      <p>{{bannerImgList[0].indexContent}}</p>
    </div>
    <div class="tab-box">
      <div class="tab-operation">
        <div class="tab-title">关于我们</div>
        <div class="tab-item" v-if="tabList&&tabList.length>0">
          <span
            v-for="(item,index) in tabList"
            :key="index"
            :class="activeIndex===index?'active':''"
            @click="scrollToPosition(index)"
          >{{item.indexName}}</span>
        </div>
      </div>
    </div>
    <div class="why-select-me about-model-us roll" v-if="aboutUs">
      <h3 class="title">{{aboutUs.indexName}}</h3>
      <span class="index-model-line"></span>
      <div class="select-me-box">
        <img :src="returnImg(aboutUs.children[0].indexImg)" :alt="aboutUs.children[0].indexName">
        <div class="article-box">
          <h3 class="article-title">{{aboutUs.children[0].indexName}}</h3>
          <!-- <p class="article-content">{{aboutUs.children[0].indexContent}}</p> -->
          <p class="article-content" v-html="aboutUs.children[0].indexContent"></p>
        </div>
      </div>
    </div>
    <div class="enterprise-culture roll" v-if="enterpriseCulture">
      <h3 class="title">{{enterpriseCulture.indexName}}</h3>
      <span class="index-model-line"></span>
      <div class="select-me-box">
        <div class="corporate-culture">
          <div class="culture-box">
            <div class="culture-top">
              <div class="culture-top-left u313">
                <div class="culture-item">
                  <!-- <h3>{{enterpriseCulture.children[0].indexName}}</h3>
                  <p>{{enterpriseCulture.children[0].indexContent}}</p>-->
                  <h3>{{enterpriseCulture.children[0].indexName}}</h3>
                  <p>{{enterpriseCulture.children[0].indexContent}}</p>
                </div>
              </div>
              <div class="culture-top-right">
                <div class="culture-top-right-item u280">
                  <div class="culture-item">
                    <h3>{{enterpriseCulture.children[1].indexName}}</h3>
                    <p>{{enterpriseCulture.children[1].indexContent}}</p>
                  </div>
                </div>
                <div class="culture-top-right-item u297">
                  <div class="culture-item">
                    <!-- <h3>{{enterpriseCulture.children[2].indexName}}</h3>
                    <p>{{enterpriseCulture.children[2].indexContent}}</p>-->
                    <h3>{{enterpriseCulture.children[2].indexName}}</h3>
                    <p>{{enterpriseCulture.children[2].indexContent}}</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="culture-bot">
              <div class="culture-bot-left u288">
                <div class="culture-item">
                  <h3>{{enterpriseCulture.children[3].indexName}}</h3>
                  <p>{{enterpriseCulture.children[3].indexContent}}</p>
                </div>
              </div>
              <div class="culture-bot-right u305">
                <div class="culture-item">
                  <h3>{{enterpriseCulture.children[4].indexName}}</h3>
                  <p>{{enterpriseCulture.children[4].indexContent}}</p>
                </div>
              </div>
            </div>-->
          </div>
        </div>
      </div>
    </div>
    <!-- 隐藏智远股东 -->
    <!-- <div class="energize roll u238" v-if="selectMeList">
      <h3 class="title">{{selectMeList.indexName}}</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box">
        <li class="select-me-item" v-for="(item,index) in selectMeList.children" :key="index">
          <h3>{{item.indexName}}</h3>
          <p>{{item.indexContent}}</p>
        </li>
      </ul>
    </div>-->
    <!-- 荣誉资质 -->
    <div class="certification roll u236" id="countToWrapper" v-if="certificationList">
      <h3 class="title">{{certificationList.indexName}}</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box">
        <li
          class="select-me-item"
          v-for="(item,index) in certificationList.children"
          :key="index"
          @click="handleChangeImg(item)"
        >
          <span class="num">
            <count-to
              ref="countTos"
              class="refset"
              :startVal="0"
              :endVal="Number(item.indexTitle)"
              :decimals="0"
              :duration="5000"
            ></count-to>
          </span>
          <span class="unit">{{item.indexContent}}</span>
          <span class="name name-mobile">{{item.indexName}}</span>
        </li>
      </ul>
      <img :src="returnImg(activeImg)" alt>
    </div>
    <!-- 发展历史 -->
    <div class="history roll u2295" v-if="selectMeList">
      <!-- v-if="translateNum !== 0 && translateIndex !== 0" -->
      <div class="right" @click="handlerRight" :class="translateIndex == 0?'no-corsor':''">
        <el-icon>
          <ArrowRightBold/>
        </el-icon>
      </div>
      <!-- v-if="translateNum !== 0 && translateIndex !== translateNum" -->
      <div class="left" @click="handlerLeft" :class="translateIndex == translateNum?'no-corsor':''">
        <el-icon>
          <ArrowLeftBold/>
        </el-icon>
      </div>
      <h3 class="title">{{selectMeList.indexName}}</h3>
      <span class="index-model-line"></span>
      <div class="history-box">
        <ul class="select-me-box translateDom">
          <li
            class="select-me-item"
            :class="[returnHistoryYear(item.indexName)?'history-year':'after-year',item.indexName === '2022年10月'?'current-active':'']"
            v-for="(item,index) in selectMeList.children"
            :key="index"
          >
            <h3>{{item.indexName}}</h3>
            <p v-html="item.indexContent"></p>
            <span v-if="item.indexName === '2022年10月'"></span>
            <div v-if="item.indexName === '2022年10月'" class="current-active-div"></div>
          </li>
        </ul>
      </div>
    </div>
    
    <backTop/>
    <PcFooter></PcFooter>
  </div>
</template>
<script>
import PcHeader from "@/components/PcHeader/index.vue";
import PcFooter from "@/components/PcFooter/index.vue";
import backTop from "@/components/BackTop/index.vue";
import { CountTo } from "vue3-count-to";
import { getAboutUsBanner } from "@/api/PC-Home";
export default {
  components: { PcHeader, PcFooter, backTop, CountTo },
  metaInfo: {
    title: "领雁智远-智能时代的推动者",
    meta: [
      {
        name: "keywords",
        content: "智远"
      },
      {
        name: "description",
        content: "智远"
      }
    ]
  },
  computed: {},
  watch: {
    $route(to) {
      let toActiveIndex = Number(to.query.activeIndex);
      this.activeIndex = toActiveIndex;
      this.getAboutUsBanner();
      // this.scrollToPosition(this.activeIndex)
    }
  },

  data() {
    return {
      selectChangeIndex: 0,
      timer: null,
      selectMeList: {},
      certificationList: null,
      activeImg: "",
      bannerImgList: [],
      tabList: [],
      activeIndex: null,
      aboutUs: null,
      enterpriseCulture: null,
      translateIndex: 0,
      translateNum: 0
    };
  },
  mounted() {
    let toActiveIndex = Number(this.$route.query.activeIndex);
    this.activeIndex = toActiveIndex;
    this.getAboutUsBanner();
  },
  methods: {
    scrollToPosition(index) {
      if (index || Number(index) == 0) {
        this.activeIndex = index;
        this.$nextTick(() => {
          document.getElementsByClassName("roll")[index].scrollIntoView();
        });
      } else {
        document.documentElement.scrollTop = 0;
      }
    },
    returnImg(url) {
      if(url){
        return process.env.VUE_APP_URL + "/" + url;
      } 
    },
    handleChangeImg(item) {
      this.activeImg = item.indexImg;
    },
    getAboutUsBanner() {
      this.tabList = [];
      getAboutUsBanner().then(res => {
        let data = res.data;
        data.map(item => {
          if (item.id === "301") {
            this.bannerImgList = item.children;
          } else {
            this.tabList.push(item);
          }
          if (item.id === "302") {
            this.aboutUs = item;
          }
          if (item.id === "303") {
            this.enterpriseCulture = item;
          }
          if (item.id === "304") {
            this.selectMeList = item;
            this.translateNum = item.children ? item.children.length - 4 : 0;
            this.translateIndex = this.translateNum
             let dom = document.querySelector(".translateDom");
      
              dom.style.transition = "right 1s";
              dom.style.right = -3.4285 * this.translateIndex + "rem";
          }
          if (item.id === "305") {
            this.certificationList = item;
            this.activeImg = item.children[0].indexImg;
          }
        });
        // 异步监听目标元素 IntersectionObserver
        // 解读属性
        // 监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一个元素是否在视窗可见
        // 运用场景：

        // 当页面滚动时，懒加载图片或其他内容。
        // 实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。
        // 对某些元素进行埋点曝光
        // 滚动到相应区域来执行相应动画或其他任务。
        // 创建实例  循环调用 所有 dom
        const io = new IntersectionObserver(entries => {
          // entries 实际上是dom
          // 将其转为数组，遍历
          Array.from(entries).forEach(item => {
            if (item.intersectionRatio > 0.01) {
              // intersectionRatio 相交区域和目标元素的比例值
              // intersectionRect/boundingClientRect 不可见时小于等于0
              // intersectionRatio和isIntersecting是用来判断元素是否可见的s
              const countTos = this.$refs.countTos;
              // 通过$refs获取实例，遍历调用实例方法start()
              countTos.map(counto => {
                counto.start();
              });
            }
          });
        });
        // 获取所有 countToWrapper 标签 开始观察
        this.$nextTick(() => {
          const countToWrapper = document.getElementById("countToWrapper");
          io.observe(countToWrapper);
          this.scrollToPosition(this.activeIndex);
        });
      });
    },
    // 发展历史左右切换
    handlerLeft() {
      let dom = document.querySelector(".translateDom");
      this.translateIndex += 1;
      if (this.translateIndex > this.translateNum) {
        this.translateIndex = this.translateNum;
        return false;
      }
      dom.style.transition = "right 1s";
      dom.style.right = -3.4285 * this.translateIndex + "rem";
    },
    handlerRight() {
      let dom = document.querySelector(".translateDom");
      this.translateIndex -= 1;
      if (this.translateIndex < 0) {
        this.translateIndex = 0;
        return false;
      }
      dom.style.transition = "right 1s";
      dom.style.right = -3.4285 * this.translateIndex + "rem";
    },
    returnHistoryYear(str) {
      let number = str.substr(0, 4);
      return Number(number) <= 2022;
    }
  }
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     let toActiveIndex = Number(to.query.activeIndex);
  //     vm.activeIndex = toActiveIndex ? toActiveIndex : 0;
  //     vm.scrollToPosition(vm.activeIndex);
  //     // 不能获取组件实例‘this’，因为此时组件实例还没有被创建
  //     // 通过 `vm` 访问组件实例
  //   });
  // }
};
</script>
<style scoped lang="scss">
.no-corsor {
  pointer-events: none;
}
.banner-bg {
  width: 100%;
  height: 4.8rem;
}

.why-select-me {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  .select-me-box {
    width: 13.714rem;
    height: auto;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    img {
      width: 5.1rem;
      height: 100%;
      margin-right: 0.32rem;
    }
    .article-box {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      .article-title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 0.274rem;
        color: #323233;
        letter-spacing: 0;
        margin-bottom: 0.24rem;
      }
      .article-content {
        font-family: MicrosoftYaHei;
        font-size: 0.182rem !important;
        color: #323233;
        letter-spacing: 0;
        line-height: 0.32rem;
        text-align: left;
        ::v-deep p{
          span{
            font-size: 0.182rem !important;
          }
        }
      }
    }
  }
}
.enterprise-culture {
  width: 100%;
  height: 6.857rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .corporate-culture {
    width: 100%;
    margin-top: 0.64rem;

    .culture-box {
      width: 13.714rem;
      margin: 0 auto;
      .culture-top {
        width: 100%;
        height: 3.84rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 0.182rem;
        .culture-top-left {
          width: 6.765rem;
          height: 3.84rem;
          margin-right: 0.182rem;
          border-radius: 6px;
          overflow: hidden;
          padding: 0.365rem;
          box-sizing: border-box;
          &:hover {
            box-shadow: 0 0 0.228rem rgba(0, 17, 67, 0.3);
          }
        }
        .culture-top-right {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .culture-top-right-item {
            width: 100%;
            height: 1.828rem;
            border-radius: 6px;
            overflow: hidden;
            padding: 0.228rem;
            box-sizing: border-box;
            &:hover {
              box-shadow: 0 0 0.228rem rgba(0, 17, 67, 0.3);
            }
          }
        }
      }
      .culture-bot {
        width: 100%;
        height: 1.828rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        .culture-bot-left {
          flex: 1;
          height: 100%;
          margin-right: 0.228rem;
          border-radius: 6px;
          overflow: hidden;
          padding: 0.365rem;
          box-sizing: border-box;
        }
        .culture-bot-right {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 0.365rem;
          box-sizing: border-box;
        }
      }
    }
  }
}
.energize {
  width: 100%;
  height: 5.554rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .select-me-box {
    width: 13.714rem;
    height: 1.828rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .select-me-item {
      width: 4.457rem;
      height: 100%;
      background: #ffffff;
      box-shadow: 0 8px 0.32rem 0 rgba(0, 17, 67, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
      }
      h3 {
        font-family: MicrosoftYaHei;
        font-size: 0.205rem;
        color: #323233;
        letter-spacing: 0;
        text-align: center;
        line-height: 0.342rem;
        margin-bottom: 10px;
      }
      p {
        font-family: MicrosoftYaHei;
        font-size: 0.205rem;
        color: #323233;
        letter-spacing: 0;
        text-align: center;
        line-height: 0.342rem;
      }
    }
  }
}
.history {
  width: 100%;
  height: 9.851rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  &:hover {
    .left {
      display: flex;
    }
    .right {
      display: flex;
    }
  }
  // &::before{
  //     background: #1790ff;
  //     content: "";
  //     width: 100%;
  //     height: 2px;
  //     position: absolute;
  //     top: 4.31rem;
  //     left: 0px;
  //     background-image: linear-gradient(to right, #1790ff 35%, rgba(255, 255, 255, 0) 0%);
  //     background-position: bottom;
  //     background-size: 10px 4px;
  //     background-repeat: repeat-x;
  //     z-index: 1;
  //   }
  .left {
    width: 0.457rem;
    height: 0.457rem;
    text-align: center;
    position: absolute;
    top: 4.114rem;
    left: 2%;
    border: 1px solid rgba(80, 86, 97, 0.3);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    &:hover {
      border: 1px solid rgba(80, 86, 97, 1);
      .el-icon {
        color: rgba(80, 86, 97, 1);
      }
    }
    .el-icon {
      color: rgba(80, 86, 97, 0.3);
    }
  }
  .right {
    width: 0.457rem;
    height: 0.457rem;
    text-align: center;
    position: absolute;
    top: 4.114rem;
    right: 2%;
    border: 1px solid rgba(80, 86, 97, 0.3);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    &:hover {
      border: 1px solid rgba(80, 86, 97, 1);
      .el-icon {
        color: rgba(80, 86, 97, 1);
      }
    }
    .el-icon {
      color: rgba(80, 86, 97, 0.3);
    }
  }
  .history-box {
    width: 13.714rem;
    height: 100%;
    overflow: hidden;
    position: relative;
    .select-me-box {
      width: auto;
      min-width: 13.714rem;
      height: 4rem;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      right: 0;
      .select-me-item {
        width: 3.29rem;
        height: 100%;
        background: transparent;
        margin-right: 0.137rem;
        border-radius: 8px;
        position: relative;
        &:hover {
          // box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
          // background: #fff;
          // border: 2px solid #1790ff;
          // box-sizing: border-box;
          // &::before {
          //   border: 2px solid #1790ff;
          //   background:rgb(0,92,255);
          //   box-sizing: border-box;
          // }
          // &::after {
          //   display: block;
          // }
        }
        &::after {
          background: #1790ff;
          content: "";
          width: 3.222rem;
          height: 4px;
          position: absolute;
          top: 1.63rem;
          right: 0px;
          // border: 1px dashed #d6e3ef;
          background-image: linear-gradient(
            to right,
            #1790ff 35%,
            rgba(255, 255, 255, 0) 0%
          );
          background-position: bottom;
          background-size: 10px 4px;
          background-repeat: repeat-x;
          z-index: 2;
        }
        &::before {
          background: #ffffff;
          border: 2px solid #1790ff;
          box-sizing: border-box;
          content: "";
          width: 0.285rem;
          height: 0.285rem;
          border-radius: 100%;
          position: absolute;
          top: 1.508rem;
          left: 50%;
          z-index: 3;
          transform: translate(-50%, 0);
        }
        &.history-year {
          &:hover {
            // box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
            // background: #fff;
            // border: 1px solid #1790ff;
            // box-sizing: border-box;
            // &::before {
            //   border: 2px solid #1790ff;
            //   background:rgb(0,92,255);
            //   box-sizing: border-box;
            // }
            // &::after {
            //   display: block;
            // }
          }
          &::after {
            background: #d6e3ef;
            content: "";
            width: 3.5rem;
            height: 2px;
            position: absolute;
            top: 1.63rem;
            right: 0px;
            // border: 1px solid #d6e3ef;
            background-image: linear-gradient(
            to right,
            #9FA4AF 45%,
            rgba(255, 255, 255, 0) 0%
          );
          background-position: bottom;
          background-size: 10px 4px;
          background-repeat: repeat-x;
          z-index: 2;
          }
          &::before {
            background: #ffffff;
            border: 2px solid #93bfe7;
            box-sizing: border-box;
            content: "";
            width: 0.285rem;
            height: 0.285rem;
            border-radius: 100%;
            position: absolute;
            top: 1.508rem;
            left: 50%;
            z-index: 3;
            transform: translate(-50%, 0);
          }
        }
        &.after-year{
          &:hover {
            // box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
            // background: #fff;
            // border: 1px solid #1790ff;
            // box-sizing: border-box;
            &::before {
              // border: 2px solid #1790ff;
              // background:rgb(0,92,255);
              // box-sizing: border-box;
            }
            &::after {
              // display: block;
            }
          }
          &::after {
            background: #1790ff;
            content: "";
            width: 3.5rem;
            height: 0px;
            position: absolute;
            top: 1.63rem;
            right: 0px;
            border: 1px solid #1790ff;
            z-index: 2;
          }
          &::before {
            background: #ffffff;
            border: 2px solid #93bfe7;
            box-sizing: border-box;
            content: "";
            width: 0.285rem;
            height: 0.285rem;
            border-radius: 100%;
            position: absolute;
            top: 1.508rem;
            left: 50%;
            z-index: 3;
            transform: translate(-50%, 0);
          }
        }
        &.current-active{
          &:hover {
            // box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
            // background: #fff;
            // border: 1px solid #1790ff;
            // box-sizing: border-box;
            &::before {
              // border: 2px solid #1790ff;
              // background:rgb(0,92,255);
              // box-sizing: border-box;
            }
            // &::after {
            //   display: block;
            // }
            // span{
            //   display: block;
            // }
          }
          &::after {
            background: #d6e3ef;
            content: "";
            width: 3.5rem;
            height: 2px;
            position: absolute;
            top: 1.63rem;
            right: 0px;
            background-image: linear-gradient(
            to right,
            #9FA4AF 45%,
            rgba(255, 255, 255, 0) 0%
            
          );
            background-position: bottom;
            background-size: 10px 4px;
            background-repeat: repeat-x;
            background-position: bottom;
            background-size: 10px 4px;
            background-repeat: repeat-x;
            z-index: 2;
          }
          &::before {
            background: #ffffff;
            border: 2px solid #93bfe7;
            box-sizing: border-box;
            content: "";
            width: 0.285rem;
            height: 0.285rem;
            border-radius: 100%;
            position: absolute;
            top: 1.508rem;
            left: 50%;
            z-index: 3;
            transform: translate(-50%, 0);
          }
          span{
            display: none;
            position: absolute;
            top: 1.63rem;
            left: 0;
            width: 50%;
            height: 0px;
            border: 1px solid #d6e3ef;
            z-index: 2;
          }
          .current-active-div{
            background: #1790ff;
            content: "";
            width: 2rem;
            height: 0px;
            position: absolute;
            top: 1.63rem;
            left: -0.5rem;
            border: 1px solid #1790ff;
            z-index: 3;
          }
        }
        h3 {
          font-family: MicrosoftYaHei;
          font-size: 0.205rem;
          color: #323233;
          letter-spacing: 0;
          text-align: center;
          line-height: 0.342rem;
          margin-bottom: 10px;
          position: absolute;
          top: 0.514rem;
          width: 100%;
        }
        p {
          position: absolute;
          font-family: MicrosoftYaHei;
          font-size: 0.182rem;
          color: #323233;
          letter-spacing: 0;
          line-height: 0.342rem;
          padding: 0 0.228rem;
          box-sizing: border-box;
          top: 1.942rem;
          text-align: left;
        }
      }
    }
  }
}
.certification {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.457rem;
  box-sizing: border-box;
  .select-me-box {
    width: 13.714rem;
    height: 55px;
    margin: 0 auto;
    margin-top: 0.205rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .select-me-item {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: baseline;
      margin-right: 1.097rem;
      cursor: pointer;
      font-weight: bold;
      .num {
        font-size: 0.48rem;
        color: #2c82ff;
        letter-spacing: 0;
      }
      .unit {
        font-size: 0.228rem;
        color: #2c82ff;
        letter-spacing: 0;
      }
      .name {
        font-size: 0.228rem;
        color: #323233;
        letter-spacing: 0;
        margin-left: 8px;
      }
    }
  }
  img {
    width: 13.714rem;
    height: auto;
    margin: 0 auto;
    margin-top: 0.8rem;
  }
}
.title {
  width: 13.714rem;
  font-size: 0.457rem;
  color: #323233;
  letter-spacing: 0;
  text-align: center;
  margin-top: 1.097rem;
  position: relative;
}

.details {
  font-size: 0.16rem;
  color: #1790ff;
  letter-spacing: 0;
  line-height: 0.365rem;
}
.showMore {
  font-size: 0.182rem;
  color: #909399;
  letter-spacing: 0;
  line-height: 0.205rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  .el-icon {
    margin-left: 8px;
  }
}
.tab-box {
  width: 100%;
  height: 0.685rem;
  background: #f1f4f8;
  .tab-operation {
    width: 13.714rem;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    .tab-title {
      padding-right: 0.182rem;
      font-family: MicrosoftYaHei-Bold;
      font-size: 0.16rem;
      color: #323233;
      letter-spacing: 0;
      position: relative;
      font-weight: bold;
      &::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 8px;
        background: #cad6ec;
        right: 0;
        top: 6px;
      }
    }
    .tab-item {
      margin-left: 0.182rem;
      display: flex;
      span {
        margin-right: 0.457rem;
        font-family: MicrosoftYaHei;
        font-size: 0.16rem;
        color: #323233;
        letter-spacing: 0;
        cursor: pointer;
        &.active {
          color: #1790ff;
        }
      }
    }
  }
}
.culture-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  h3 {
    font-family: MicrosoftYaHei-Bold;
    font-size: 0.32rem;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 0.342rem;
    text-shadow: 0 2px 4px rgba(0, 17, 67, 0.4);
    margin-bottom: 0.228rem;
  }
  p {
    font-family: MicrosoftYaHei;
    font-size: 0.228rem;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 0.342rem;
    text-shadow: 0 1px 1px rgba(0, 17, 67, 0.4);
    display: block;
  }
}
.banner-title {
  position: absolute;
  top: 2.194rem;
  left: 1.828rem;
  width: 6.65rem;
  text-align: left;
  h3 {
    font-size: 0.32rem;
    color: #ffffff;
    letter-spacing: 0;
    margin-bottom: 0.365rem;
  }
  p {
    font-size: 0.228rem;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 0.457rem;
  }
}
@media only screen and (max-device-width: 768px) {
 ::v-deep .history .history-box .select-me-box .select-me-item.after-year::after,
 .history .history-box .select-me-box .select-me-item.current-active:hover::after,
 .history .history-box .select-me-box .select-me-item.history-year:hover::after{
   border: 0 !important;
   height: 0px;
 }
 .current-active{
   span{
     display: none !important;
   }
 }
  .banner-bg {
    height: auto;
    top: 10.457rem;
  }
  .banner-title {
    width: 92%;
    top: 2.228rem;
    left: 0.228rem;
    padding: 0 0.228rem;
    box-sizing: border-box;
    h3 {
      font-size: 0.342rem;
      margin-bottom: 0.17rem;
    }
    p {
      line-height: 0.3rem;
    }
  }
  .tab-box {
    width: 100%;
    height: 1rem;
    padding: 0 0.228rem;
    box-sizing: border-box;
    overflow-x: auto;
    .tab-operation {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      .tab-item {
        span {
          display: inline-block;
        }
      }
    }
  }
  .why-select-me {
    width: 100%;
    height: auto;
    .select-me-box {
      width: 100%;
      height: auto;
      padding: 0 0.228rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      margin-bottom: 0.228rem;
      .invite {
        width: 100%;
        text-align: left;
        ::v-deep .el-collapse-item__header {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          height: auto;
          position: relative;
          .el-icon {
            position: absolute;
            right: 0;
            top: 50%;
          }
        }
        .invite-title {
          font-size: 0.205rem;
          color: #323233;
          text-align: right;
          line-height: 0.205rem;
          margin: 0.182rem 0;
        }
        .invite-brief {
          padding-right: 0.228rem;
        }
      }
      img {
        width: 100%;
        height: 100%;
        margin-right: 0px;
      }
    }
  }
  .enterprise-culture {
    .select-me-box {
      width: 100%;
      .corporate-culture {
        .culture-box {
          width: 100%;
          .culture-top {
            .culture-top-left {
              width: 48%;
            }
          }
        }
      }
    }
  }
  .culture-item {
    h3 {
      margin-bottom: 0.228rem;
    }
    p {
      display: block;
    }
  }
  .energize {
    width: 100%;
    height: auto;
    .select-me-box {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .select-me-item {
        width: 100%;
        height: 1.828rem;
        margin-bottom: 0.228rem;
        h3 {
          font-size: 0.205rem;
          color: #323233;
          letter-spacing: 0;
          text-align: center;
          line-height: 0.342rem;
          margin-top: 0.205rem;
        }
        img {
          width: 0.365rem;
        }
      }
    }
  }
  .history {
    width: 100%;
    height: auto;
    background: #d6e3ef;
    .right {
      display: none !important;
    }
    .left {
      display: none !important;
    }
    .history-box {
      height: auto;
      width: 100%;
      .select-me-box {
        height: auto;
        position: static;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 100%;
        padding: 0 0.5rem;
        box-sizing: border-box;
        .select-me-item {
          width: 100%;
          height: 3rem;
          margin-right: 0;
          background: #fff;
          margin-bottom: 0.228rem;
          &::before {
            display: none !important;
          }
          &::after {
            display: none !important;
          }
          .current-active-div{
            display: none 
          }
          p {
            top: 0.9rem;
          }
        }
      }
    }
  }
  .certification {
    width: 100%;
    height: auto;
    padding: 0 0.228rem;
    box-sizing: border-box;
    .select-me-box {
      width: 100%;
      height: auto;
      margin: 0 auto;
      margin-top: 0.205rem;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .select-me-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: baseline;
        margin-right: 15px;
        position: relative;
        cursor: pointer;
        font-weight: bold;
        .num {
          font-size: 0.228rem;
          color: #2c82ff;
          letter-spacing: 0;
          width: 100%;
          display: block;
        }
        .unit {
          font-size: 0.182rem;
          color: #2c82ff;
          letter-spacing: 0;
          position: absolute;
          right: 0;
          top: 0.228rem;
        }
        .name {
          font-size: 0.182rem;
          color: #323233;
          letter-spacing: 0;
          margin-left: 8px;
          margin-top: 10px;
        }
      }
    }
    img {
      width: 100%;
      height: auto !important;
      margin: 0 auto;
      margin-top: 0.8rem;
      margin-bottom: 0.228rem;
    }
  }
  .title {
    width: 100%;
    font-size: 0.457rem;
  }
}
</style>